<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>信息窗体事件</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=2.0&key=53b4e246765e8898dc8ecfa7f7a543e5"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="../layui/lib/layui-v2.5.5/layui.js"></script>
    <link rel="stylesheet" href="../layui/lib/layui-v2.5.5/css/layui.css">
    <style>
        .BMap_cpyCtrl
        {
            display: none;
        }
        .anchorBL {
            display: none;
        }
        .amap-logo img{
            display: none;
        }
        .amap-copyright {
            opacity:0;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    //初始化地图对象，加载地图
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [113.53591,34.817077],
        viewMode: '3D',
        zoom: 17,
        rotation: 45,
        pitch: 65,

    });
    var lnglats = [
        [113.538764,34.816575],
        [113.538179,34.81709],
        [113.539408,34.817068],
        [113.538732,34.817619],
        [113.535626,34.816848],
        [113.535368,34.816386],
        [113.537637,34.816615],
        [113.537171,34.81646],
        [113.537315,34.816002],
        [113.537224,34.818165],
        [113.538018,34.817544],
        [113.538539,34.816478],
        [113.537192,34.81694],
        [113.537256,34.816773],
        [113.537256,34.816773],
        [113.537262,34.81609],
        [113.537348,34.814686],
        [113.537659,34.814445],
        [113.539542,34.814132],
        [113.537842,34.811454],
        [113.539757,34.810393],
        [113.53921,34.812899],
        [113.538099,34.815906],
        [113.536382,34.816112],
        [113.536543,34.817465],
        [113.538254,34.818086],
        [113.539579,34.818156],
        [113.540357,34.81949],
        [113.537552,34.819874],
        [113.537149,34.819662],
    ];


    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    for (var i = 0, marker; i < lnglats.length; i++) {
        var marker = new AMap.Marker({
            position: lnglats[i],
            map: map
        });
        marker.content = `
<div class="layui-form">
  <table class="layui-table">
    <colgroup>
      <col width="150">
      <col width="150">
      <col width="200">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>志愿者</th>
        <th>电话</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ZZUer</td>
        <td>156913681772</td>
        <td>空闲ing......</td>
      </tr>
    </tbody>
  </table>
</div>
        `;
        marker.on('click', markerClick);
        marker.emit('click', {target: marker});
    }
    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    map.setFitView();
</script>
</body>
</html>